<template>
	<div class="ratings" ref="ratings">
		<div class="ratings-content">
			<div class="overview">
				<div class="overview-left">
					<h4 class="score">{{seller.score}}</h4>
					<div class="title">综合评分</div>
					<div class="rank">高于周边商家{{seller.rankRate}}%</div>
				</div>
				<div class="overview-right">
					<div class="score-wrapper">
						<span class="title">服务态度</span>
						<star :size="36" :score="seller.serviceScore"></star>
						<span class="score">{{seller.serviceScore}}</span>
					</div>
					<div class="score-wrapper">
						<span class="title">商品评分</span>
						<star :size="36" :score="seller.foodScore"></star>
						<span class="score">{{seller.foodScore}}</span>
					</div>
					<div class="delivery-wrapper">
						<span class="title">送达时间</span>
						<span class="delivery">{{seller.deliveryTime}}分钟</span>
					</div>
				</div>
			</div>
			<split></split>
			<ratingselect :ratings="ratings"
			@toSelect="toSelect" @contentToggle="contentToggle"></ratingselect>
			<div class="ratings-wrapper" ref="ratings">
				<ul>
					<li v-for="rating in ratings" class="rating-item" v-show="needShow(rating.rateType,rating.text)">
						<div class="avatar">
							<img width="28" height="28" :src="rating.avatar">
						</div>
						<div class="content">
							<h4 class="name">{{rating.username}}</h4>
							<div class="star-wrapper">
								<star :size="24" :score="rating.score"></star>
								<span class="delivery" v-show="rating.delivery"></span>
							</div>
							<p class="text">{{rating.text}}</p>
							<div class="recommend" v-show="rating.recommend && rating.recommend.length">
								<span class="icon-thumb_up"></span>
								<span class="item" v-for="item in rating.recommend">{{item}}</span>
							</div>
							<div class="time">{{rating.rateTime | formatDate}}</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import BScroll from 'better-scroll';
	import star from '../star/star';
	import ratingselect from '../ratingselect/ratingselect';
	import split from '../split/split';
	import {formatDate} from '../../common/js/date';

	const ERR_OK = 0;
	const ALL = 2;

	export default {
		props: {
			seller: {
				type:Object
			}
		},
		data() {
			return {
				ratings:[],
				showFlag:false,
				selectType:ALL,
				onlyContent:false,
			}
		},
		created() {
	    this.axios.get('/api/ratings')
	    .then((res) => {
	      if(res.data.errno === ERR_OK) {
	        this.ratings = res.data.data;
	        this.$nextTick(() => {
		        let scroll = new BScroll(this.$refs.ratings,{
		        	click:true
		        })
	        })
	      }
	    })
	    .catch((e) => {console.log(e)})
  	},
  	filters: {
			formatDate(time) {
				let date = new Date(time);
				return formatDate(date,'yyyy-MM-dd hh:mm')
			}
		},
		methods: {
			toSelect(type) {
				this.selectType = type;
			},
			contentToggle(onlyContent) {
				this.onlyContent = onlyContent;
			},
			needShow(type,text) {
				if(this.onlyContent && !text) {
					return false;
				};
				if(this.selectType === ALL) {
					return true;
				} else {
					return type === this.selectType
				}
			}
		},
		components: {
			star,
			ratingselect,
			split
		}
	}
</script>

<style lang='stylus' rel='stylesheet/stylus'>
	@import "../../common/stylus/mixin";
	.ratings
		position:absolute
		top:174px
		bottom:0
		left:0
		width:100%
		overflow:hidden
		.overview
			display:flex
			padding:18px 0
			.overview-left
				flex:0 0 137px
				padding:6px 0
				width:137px
				border-right:1px solid rgba(7,17,27,0.1)
				text-align:center
				@media only screen and (max-width:320px)
					flex:0 0 110px
					width:110px
				.score
					margin-bottom:6px
					line-height:28px
					font-size:24px
					color:rgb(255,153,0)
				.title
					margin-bottom:8px
					line-height:12px
					font-size:12px
					color:rgb(7,17,27)
				.rank
					line-height:10px
					font-size:10px
					color:rgb(147,153,159)
			.overview-right
				flex:1
				padding:6px 0 6px 24px
				@media only screen and (max-width:380px)
					padding-left:12px
				@media only screen and (max-width:320px)
					padding-left:6px
				.score-wrapper
					margin-bottom:8px
					.title
						display:inline-block
						line-height:18px
						vertical-align:top
						font-size:12px
						color:rgb(7,17,27)
					.star
						display:inline-block
						margin:0 12px
						@media only screen and (max-width:380px)
							margin:0 8px
						@media only screen and (max-width:320px)
							margin:0 3px
						vertical-align:top
					.score
						display:inline-block
						line-height:18px
						vertical-align:top
						font-size:12px
						color:rgb(255,153,0)
				.delivery-wrapper
					.title
						line-height:18px
						font-size:12px
						color:rgb(7,17,27)
					.delivery
						margin-left:12px
						font-size:12px
						color:rgb(147,153,159)
		.ratings-wrapper
			padding:0 18px
			.rating-item
				display:flex
				padding:18px 0
				border-1px(rgba(7,17,27,0.1))
				.avatar
					flex:0 0 28px
					width:28px
					margin-right:12px
					img
						border-radius:50%
				.content
					position:relative
					flex:1
					.name
						margin-bottom:4px
						line-height:12px
						font-size:12px
						color:rgb(7,17,27)
					.star-wrapper
						margin-bottom:6px
						font-size:0
						.star
							display:inline-block
							margin-right:6px
							vertical-align:top
						.delivery
							display:inline-block
							vertical-align:top
							line-height:12px
							font-size:10px
							color:rgb(7,17,27)
					.text
						margin-bottom:8px
						line-height:18px
						color:rgb(7,17,27)
						font-size:12px
					.recommend
						line-height:16px
						font-size:0
						.icon-thumb_up
							margin-right:4px
							font-size:12px
							color:rgb(0,160,220)
						.item
							display:inline-block
							margin:0 4px
							padding:0 6px
							font-size:9px
							border:1px solid rgba(7,17,27,0.1)
							border-radius:1px
							color:rgb(147,153,159)
							background:#fff
					.time
						position:absolute
						top:0
						right:0
						line-height:12px
						font-size:10px
						font-weight:200
						color:rgb(147,153,159)

</style>